<template>
  <view :class="['trade-filter', { filter: filter }]">
    <scroll-view class="trade-parent" scroll-y="true">
      <view :class="['tp-item', { active: item.value === activeParent }]" v-for="(item, index) in trade" :key="index"
        @click="handleParent(item)">{{ item.label }}</view>
    </scroll-view>
    <scroll-view class="trade-child" scroll-y="true">
      <view :class="['tc-item', { active: item.tradeid === activeChild }]" v-for="(item, index) in activeList"
        :key="index" @click="handleChild(item)">
        {{ item.label }}
        <u-icon name="checkbox-mark" size="32" v-if="item.value === activeChild"></u-icon>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// import trade from "../utils/tradeData";
// import { getTradeInfo } from "@/api/index";
import { getZpTrade } from "@/api/index";

export default {
  props: {
    formData: Array,
    propList: [Array, String],
    limit: Boolean,
    filter: Boolean,
  },
  data() {
    return {
      trade: [],
      activeParent: "",
      activeChild: "",
      activeList: [],
      defaut: {
        value: "",
        label: "不限",
      },
    };
  },
  watch: {
    formData: {
      handler(val) {
        if (val) {
          this.activeParent = val[0];
          this.activeChild = val[1];
          if (this.activeParent !== (this.activeChild || "1000")) {
            let parent =
              this.trade.find((ele) => ele.value === this.activeParent) ||
              this.trade[0];
            this.handleParent(parent, true);
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    // if (!this.limit) {
    //   this.trade = [{ value: "1000", label: "全部行业" }].concat(this.trade);
    // }
    this.getTradeData();
  },
  methods: {
    getTradeData() {
      // if (getApp)
      getZpTrade().then((res) => {
        this.trade = this.formateTrade(res.data);
        if (!this.limit) {
          this.trade.unshift({ value: "1000", label: "全部行业" });
        }
      });
    },
    formateTrade(data) {
      if (!Array.isArray(data)) {
        return [];
      }
      return data.map((item) => {
        return {
          value: item.tradeid,
          label: item.tradename,
          children: this.formateTrade(item.children),
        };
      });
    },
    handleParent(item, isEcho) {
      this.activeParent = item.value;
      this.activeList = [];
      if (item.value == "1000" && !isEcho) {
        this.$emit(
          "confirm",
          [item.value, item.label, this.activeParent],
          this.propList
        );
      } else {
        // getTradeInfo({ totalid: item.value }).then((res) => {
        //   let data = res.data || res;
        //   if (data) {
        //     let childList = [];
        //     for (let key in data) {
        //       childList.push(data[key]);
        //     }
        //     this.activeList = JSON.parse(JSON.stringify(childList));
        //   } else {
        //     this.$emit(
        //       "confirm",
        //       [item.value, item.label, this.activeParent],
        //       this.propList
        //     );
        //   }
        // });
        for (let i = 0; i < this.trade.length; i++) {
          if (this.trade[i].value == this.activeParent) {
            this.activeList = this.trade[i].children;
            break;
          }
        }
        if (!this.activeList.length) {
          this.$emit(
            "confirm",
            [item.value, item.label, this.activeParent],
            this.propList
          );
        }
      }
    },
    handleChild(item) {
      this.activeChild = item.tradeid;
      this.$emit(
        "confirm",
        // [item.tradeid, item.tradeName, this.activeParent],
        [item.value, item.label, this.activeParent],
        this.propList
      );
    },
  },
};
</script>

<style lang="scss">
.trade-filter {
  display: flex;
  max-height: 100%;
  background: $uni-bg-color;
  &.filter {
    max-height: calc(60vh - 128rpx);
  }
  .trade-parent {
    padding: 20rpx 0 20rpx 24rpx;
    // width: 40%;
    max-height: 100%;
    overflow: auto;
    background: $uni-bg-color-grey;
    .tp-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      border-radius: 16rpx 0 0 16rpx;
      &.active {
        background: $uni-bg-color;
      }
    }
  }
  .trade-child {
    flex-grow: 1;
    padding: 20rpx 0;
    max-height: 100%;
    overflow: auto;
    .tc-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
}
</style>
